<template>
  <div class="app-container">
    <!-- <div class="Top-title">计量详情</div> -->
    <!-- <div class="Decorative-line"></div> -->
    <div class="product-type">
      <div class="title">产品类型：</div>
      <div
        class="Type-box"
        :class="isactive == index ? 'Select' : ''"
        @click="OnClickProductType(index, item)"
        v-for="(item, index) in productTypeList"
        :key="index"
      >
        {{ item }}
      </div>
    </div>
    <el-tabs
      v-model="classification"
      class="classification"
      @tab-click="handleClick"
    >
      <!-- 部门 -->
      <el-tab-pane style="font-size: 12px" label="部门" name="department">
        <div class="product-type">
          <span class="title"> 日期： </span>
          <!-- <div> -->
          <el-date-picker
            style="26px"
            @change="SimeSlotChange"
            v-model="CloudHostLeveOnequeryParams.timetag"
            type="date"
            placeholder="请选择日期"
            :clearable="false"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          <span class="title" style="margin-left: 20px"> 云服务商： </span>
          <el-select
            style="width: 130px"
            clearable
            filterable
            v-model="CloudHostLeveOnequeryParams.supplier"
            placeholder="请选择云服务商"
          >
            <el-option
              v-for="item in logicListALL"
              :key="item.value"
              :label="item.cloudSupplierName"
              :value="item.cloudSupplier"
            >
            </el-option>
          </el-select>
          <span class="title" style="margin-left: 20px"> 部门： </span>
          <el-cascader
            :options="deptOptions"
            v-model="deptId"
            :props="{ value: 'id', checkStrictly: true }"
            :show-all-levels="false"
            placeholder="请选择部门"
            change-on-select
            clearable
            filterable
            @change="handleChange"
          >
          </el-cascader>
          <el-button
            style="margin-left: 10px"
            @click="CloudHostLeveOneQuery"
            type="primary"
            >查询</el-button
          >
          <el-button
            style="margin-left: 10px"
            @click="CloudHostExport(isactive, 1)"
            type="primary"
            >导出</el-button
          >
        </div>
        <div class="TotalCost" style="margin-top: 10px">
          <div class="DecorationPoint"></div>
          计量明细
        </div>
        <!-- 云主机 -->
        <el-table
          :data="CloudHostLeveOneData"
          stripe
          v-loading="loading"
          v-if="ProductTypeName == '云主机'"
          style="width: 100%; font-size: 12px"
        >
          <el-table-column prop="supplierName" label="云服务商" />
          <el-table-column prop="deptName" label="部门">
            <template slot-scope="scope">
              <span
                @click="OnclickCloudHostLeve(scope.row)"
                style="color: rgb(24, 144, 255); cursor: pointer"
                >{{ scope.row.deptName }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="系统数量">
            <template slot-scope="scope">
              {{ scope.row.projectCount }}
            </template>
          </el-table-column>
          <el-table-column prop="ecsCount" label="云主机数量" />
          <el-table-column prop="cpuCount" label="vCPU总核数(核)" />
          <el-table-column prop="memCount" label="内存总大小（GB）" />
          <el-table-column prop="diskCount" label="存储总大小(TB)" />
        </el-table>
        <div style="text-align: right" v-if="ProductTypeName == '云主机'">
          <pagination
            v-show="CloudHostLeveOnetotal > 0"
            :total="CloudHostLeveOnetotal"
            :page.sync="CloudHostLeveOnequeryParams.pageNum"
            :limit.sync="CloudHostLeveOnequeryParams.pageSize"
            @pagination="CloudHostLeveOneQuery"
          />
        </div>
        <!-- 高性能服务器 -->
        <el-table
          :data="BareMetalLeveOneData"
          v-if="ProductTypeName == '高性能'"
          v-loading="loading"
          style="width: 100%; font-size: 12px"
        >
          <el-table-column prop="supplierName" label="云服务商" />
          <el-table-column prop="deptName" label="部门">
            <template slot-scope="scope">
              <span
                @click="OnclickBareMetalLeve(scope.row)"
                style="color: rgb(24, 144, 255); cursor: pointer"
                >{{ scope.row.deptName }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="phyCount" label="系统数量" />
          <el-table-column prop="phyCount" label="物理机数量" />
          <el-table-column prop="ljswlfwq1" label="高性能A(台)" />
          <el-table-column prop="ljswlfwq2" label="高性能B(台)" />
          <el-table-column prop="ljswlfwq3" label="高性能C(台)" />
          <el-table-column prop="ljswlfwq4" label="高性能D(台)" />
          <el-table-column prop="ljswlfwq5" label="高性能E(台)" />
        </el-table>
        <div style="text-align: right" v-if="ProductTypeName == '高性能'">
          <pagination
            v-show="BareMetalLeveOnetotal > 0"
            :total="BareMetalLeveOnetotal"
            :page.sync="CloudHostLeveThreequeryParams.pageNum"
            :limit.sync="CloudHostLeveThreequeryParams.pageSize"
            @pagination="CloudHostLeveOneQuery"
          />
        </div>
        <!-- 存储 -->
        <el-table
          :data="CloudDiskOneData"
          stripe
          v-loading="loading"
          v-if="ProductTypeName == '云硬盘'"
          style="width: 100%; font-size: 12px"
        >
          <el-table-column prop="supplierName" label="云服务商" />
          <el-table-column label="部门">
            <template slot-scope="scope">
              <span
                @click="CloudDiskOneToTwoQuery(scope.row)"
                style="color: rgb(24, 144, 255); cursor: pointer"
              >
                {{ scope.row.deptName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="projectCount" label="系统数量" />
          <el-table-column prop="fbs" label="分布式存储 通用型(TB)" />
          <el-table-column prop="fc" label="集中式存储 通用型(TB)" />
          <el-table-column prop="fcssd" label="集中性存储 高性能(TB)" />
          <el-table-column prop="spycc" label="视频云存储(TB)" />
        </el-table>
        <div style="text-align: right" v-if="ProductTypeName == '云硬盘'">
          <pagination
            v-show="CloudDiskOneTotal > 0"
            :total="CloudDiskOneTotal"
            :page.sync="CloudHostLeveOnequeryParams.pageNum"
            :limit.sync="CloudHostLeveOnequeryParams.pageSize"
            @pagination="CloudDiskOneQuery"
          />
        </div>
        <!-- 应用安全 -->
        <el-table
          :data="ApplicationSecurityOneData"
          v-if="ProductTypeName == '应用安全'"
          v-loading="loading"
          ref="ApplicationSecurity"
          style="width: 100%; font-size: 12px"
        >
          <el-table-column prop="supplierName" label="云服务商" />
          <el-table-column label="部门">
            <template slot-scope="scope">
              <span
                @click="ApplicationSecurityOneToTwoQuery(scope.row)"
                style="color: rgb(24, 144, 255); cursor: pointer"
              >
                {{ scope.row.deptName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="projectCount" label="系统数量" />
          <el-table-column prop="ecsCount" label="服务器数量" />
          <el-table-column
            prop="safeXnwebfhqCount"
            label="虚拟web防火墙（套）"
          />
          <el-table-column prop="safeXnfhqCount" label="虚拟防火墙（套）" />
          <el-table-column prop="safeXnrqfxCount" label="虚拟入侵防御（套）" />
          <el-table-column prop="safeFbdCount" label="防病毒（套）" />
          <el-table-column prop="safeLlsjCount" label="流量审计（套）" />
          <el-table-column prop="safeRzsjCount" label="日志审计（套）" />
          <el-table-column prop="safeAqsjCount" label="安全审计（套）" />
          <el-table-column prop="safeSjktjCount" label="数据库审计（套）" />
        </el-table>
        <div style="text-align: right" v-if="ProductTypeName == '应用安全'">
          <pagination
            v-show="ApplicationSecurityOneTotal > 0"
            :total="ApplicationSecurityOneTotal"
            :page.sync="CloudHostLeveOnequeryParams.pageNum"
            :limit.sync="CloudHostLeveOnequeryParams.pageSize"
            @pagination="ApplicationSecurityOneQuery"
          />
        </div>
      </el-tab-pane>
      <!-- 系统 -->
      <el-tab-pane style="font-size: 12px" label="系统" name="system">
        <div class="product-type">
          <span class="title"> 计费时间： </span>
          <!-- <div> -->
          <el-date-picker
            style="26px"
            @change="SimeSlotChange"
            v-model="CloudHostLeveTwoqueryParams.timetag"
            type="date"
            :clearable="false"
            placeholder="请选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          <!-- </div> -->
          <span class="title" style="margin-left: 20px"> 云服务商： </span>
          <!-- <div> -->
          <el-select
            style="width: 130px"
            clearable
            filterable
            v-model="CloudHostLeveTwoqueryParams.supplier"
            placeholder="请选择云服务商"
          >
            <el-option
              v-for="item in logicListALL"
              :key="item.value"
              :label="item.cloudSupplierName"
              :value="item.cloudSupplier"
            >
            </el-option>
          </el-select>
          <!-- </div> -->
          <span class="title" style="margin-left: 20px"> 部门： </span>
          <el-cascader
            :options="deptOptions"
            v-model="CloudHostLeveTwoqueryParams.deptId"
            :props="{ value: 'id', checkStrictly: true }"
            :show-all-levels="false"
            placeholder="请选择部门"
            change-on-select
            clearable
            filterable
            @change="handleChangeLeveThree"
          >
          </el-cascader>
          <!-- </span> -->
          <span
            class="title"
            style="margin-left: 20px"
            v-if="ProductTypeName != '应用安全'"
          >
            系统：
          </span>
          <!-- <span> -->
          <el-select
            v-if="ProductTypeName != '应用安全'"
            v-model="CloudHostLeveTwoqueryParams.projectId"
            clearable
            filterable
            style="width: 200px"
            placeholder="请选择项目"
          >
            <el-option
              v-for="item in projectLists"
              :key="item.id"
              :label="item.projectname"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-button
            style="margin-left: 10px"
            @click="CloudHostLeveTwoQuery"
            type="primary"
            >查询</el-button
          >
          <el-button
            style="margin-left: 10px"
            @click="CloudHostExport(isactive, 2)"
            type="primary"
            >导出</el-button
          >
          <!-- </span> -->
        </div>
        <!-- <div class="TotalCost">
                    <div class="DecorationPoint"></div>
                    总计量
                </div>
                <div class="CostDescription">
                    到计量为
                </div>
                <div class="TotalNumber">
                    未产生计量数据
                </div> -->
        <div class="TotalCost" style="margin-top: 10px">
          <div class="DecorationPoint"></div>
          计量明细
        </div>
        <!-- 云主机 -->
        <el-table
          :data="CloudHostLeveTwoData"
          v-if="ProductTypeName == '云主机'"
          stripe
          v-loading="loading"
          style="width: 100%; font-size: 12px"
        >
          <el-table-column prop="supplierName" label="云服务商" />
          <el-table-column prop="deptName" label="部门" />
          <el-table-column label="系统">
            <template slot-scope="scope">
              <span
                @click="OnclickCloudHostLeveTow(scope.row)"
                style="color: rgb(24, 144, 255); cursor: pointer"
                >{{ scope.row.projectname }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="ecsCount" label="云主机数量" />
          <el-table-column prop="cpuCount" label="vCPU总核数(核)" />
          <el-table-column prop="memCount" label="内存总大小(GB)" />
          <el-table-column prop="fbs" label="分布式存储 通用型(TB)" />
          <el-table-column prop="fc" label="集中式存储 通用型(TB)" />
          <el-table-column prop="fcssd" label="集中性存储 高性能(TB)" />
          <el-table-column prop="spycc" label="视频云存储(TB)" />
        </el-table>
        <div style="text-align: right" v-if="ProductTypeName == '云主机'">
          <pagination
            v-show="CloudHostLeveTwototal > 0"
            :total="CloudHostLeveTwototal"
            :page.sync="CloudHostLeveTwoqueryParams.pageNum"
            :limit.sync="CloudHostLeveTwoqueryParams.pageSize"
            @pagination="CloudHostLeveTwoQuery"
          />
        </div>
        <!-- 高性能服务器 -->
        <el-table
          :data="BareMetalLeveTwoData"
          v-if="ProductTypeName == '高性能'"
          stripe
          v-loading="loading"
          style="width: 100%; font-size: 12px"
        >
          <el-table-column prop="supplierName" label="云服务商" />
          <el-table-column prop="deptName" label="部门" />
          <el-table-column label="系统">
            <template slot-scope="scope">
              <span
                @click="OnclickBareMetaLeveTow(scope.row)"
                style="color: rgb(24, 144, 255); cursor: pointer"
                >{{ scope.row.projectname }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="物理机数量">
            <template slot-scope="scope">
              {{ scope.row.phyCount }}
            </template>
          </el-table-column>
          <el-table-column prop="ljswlfwq1" label="高性能A(台)" />
          <el-table-column prop="ljswlfwq2" label="高性能B(台)" />
          <el-table-column prop="ljswlfwq3" label="高性能C(台)" />
          <el-table-column prop="ljswlfwq4" label="高性能D(台)" />
          <el-table-column prop="ljswlfwq5" label="高性能E(台)" />
          <!-- <el-table-column
                        prop="date"
                        label="CPU平均使用率(%)"
                    />
                    <el-table-column
                        prop="date"
                        label="内存平均使用率(%)"
                    />
                    <el-table-column
                        prop="date"
                        label="存储平均使用率(%)"
                    /> -->
        </el-table>
        <div style="text-align: right" v-if="ProductTypeName == '高性能'">
          <pagination
            v-show="BareMetalLeveTwototal > 0"
            :total="BareMetalLeveTwototal"
            :page.sync="CloudHostLeveTwoqueryParams.pageNum"
            :limit.sync="CloudHostLeveTwoqueryParams.pageSize"
            @pagination="CloudHostLeveTwoQuery"
          />
        </div>
        <!-- 存储 -->
        <el-table
          :data="CloudDiskTwoData"
          v-if="ProductTypeName == '云硬盘'"
          stripe
          v-loading="loading"
          style="width: 100%; font-size: 12px"
        >
          <el-table-column prop="supplierName" label="云服务商" />
          <el-table-column prop="deptName" label="部门" />
          <el-table-column label="系统名称">
            <template slot-scope="scope">
              <span
                @click="CloudDiskTwoToTheerQuery(scope.row)"
                style="color: rgb(24, 144, 255); cursor: pointer"
              >
                {{ scope.row.projectName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="fbs" label="分布式存储 通用型(TB)" />
          <el-table-column prop="fc" label="集中式存储 通用型(TB)" />
          <el-table-column prop="fcssd" label="集中性存储 高性能(TB)" />
          <el-table-column prop="spycc" label="视频云存储(TB)" />
        </el-table>
        <div style="text-align: right" v-if="ProductTypeName == '云硬盘'">
          <pagination
            v-show="CloudDiskTwoTotal > 0"
            :total="CloudDiskTwoTotal"
            :page.sync="CloudHostLeveTwoqueryParams.pageNum"
            :limit.sync="CloudHostLeveTwoqueryParams.pageSize"
            @pagination="CloudDiskTwoQuery"
          />
        </div>
        <!-- 安全产品 -->
        <el-table
          :data="ApplicationSecurityTwoData"
          v-if="ProductTypeName == '应用安全'"
          stripe
          v-loading="loading"
          style="width: 100%; font-size: 12px"
        >
          <el-table-column prop="supplierName" label="云服务商" />
          <el-table-column label="部门">
            <template slot-scope="scope">
              {{ scope.row.deptName }}
            </template>
          </el-table-column>
          <el-table-column label="系统">
            <template slot-scope="scope">
              {{ scope.row.projectName }}
            </template>
          </el-table-column>
          <el-table-column prop="ecsCount" label="云主机器数量">
            <template slot-scope="scope">
              {{ scope.row.ecsCount }}
            </template>
          </el-table-column>
          <el-table-column prop="safeXnwebfhqCount" label="虚拟web防火墙" />
          <el-table-column prop="safeXnfhqCount" label="虚拟防火墙" />
          <el-table-column prop="safeXnrqfxCount" label="虚拟入侵防御" />
          <el-table-column prop="safeFbdCount" label="防病毒" />
          <el-table-column prop="safeLlsjCount" label="流量审计" />
          <el-table-column prop="safeRzsjCount" label="日志审计" />
          <el-table-column prop="safeAqsjCount" label="安全审计" />
          <el-table-column prop="safeSjktjCount" label="数据库审计" />
        </el-table>
        <div style="text-align: right" v-if="ProductTypeName == '应用安全'">
          <pagination
            v-show="ApplicationSecurityTwoTotal > 0"
            :total="ApplicationSecurityTwoTotal"
            :page.sync="CloudHostLeveTwoqueryParams.pageNum"
            :limit.sync="CloudHostLeveTwoqueryParams.pageSize"
            @pagination="ApplicationSecurityTwoQuery"
          />
        </div>
      </el-tab-pane>
      <!-- 云主机 -->
      <el-tab-pane
        style="font-size: 12px"
        :label="ProductTypeName"
        v-if="ProductTypeName != '应用安全'"
        name="CloudHost"
      >
        <div class="product-type">
          <span class="title"> 计费时间： </span>
          <!-- <span> -->
          <el-date-picker
            style="26px"
            @change="SimeSlotChange"
            v-model="CloudHostLeveThreequeryParams.timetag"
            type="date"
            :clearable="false"
            placeholder="请选择日期"
            format="yyyy 年 MM 月 dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          <!-- </span> -->
          <span class="title" style="margin-left: 20px"> 云服务商： </span>
          <!-- <span> -->
          <el-select
            style="width: 130px"
            clearable
            filterable
            v-model="CloudHostLeveThreequeryParams.supplier"
            placeholder="请选择云服务商"
          >
            <el-option
              v-for="item in logicListALL"
              :key="item.value"
              :label="item.cloudSupplierName"
              :value="item.cloudSupplier"
            >
            </el-option>
          </el-select>
          <!-- </span> -->
          <span class="title" style="margin-left: 20px"> 部门： </span>
          <!-- <span> -->
          <el-cascader
            :options="deptOptions"
            v-model="CloudHostLeveThreequeryParams.deptId"
            :props="{ value: 'id', checkStrictly: true }"
            :show-all-levels="false"
            placeholder="请选择部门"
            change-on-select
            clearable
            filterable
            @change="handleChangeLeveThree"
          >
          </el-cascader>
          <!-- </span> -->
          <span class="title" style="margin-left: 20px"> 系统： </span>
          <!-- <span> -->
          <el-select
            v-model="CloudHostLeveThreequeryParams.projectId"
            clearable
            filterable
            style="width: 200px"
            placeholder="请选择项目"
          >
            <el-option
              v-for="item in projectLists"
              :key="item.id"
              :label="item.projectname"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <span class="title" style="margin-left: 20px"> IP： </span>
          <el-input
            style="width: 200px"
            clearable
            v-model="CloudHostLeveThreequeryParams.hostIp"
            placeholder="请输入IP"
          ></el-input>

          <el-button
            style="margin-left: 10px"
            @click="CloudHostLeveThreeQuery"
            type="primary"
            >查询</el-button
          >
          <el-button
            style="margin-left: 10px"
            @click="CloudHostExport(isactive, 3)"
            type="primary"
            >导出</el-button
          >
        </div>
        <div class="TotalCost" style="margin-top: 10px">
          <div class="DecorationPoint"></div>
          计量明细
        </div>
        <!-- 云主机 -->
        <el-table
          :data="CloudHostLeveThreeData"
          stripe
          v-loading="loading"
          v-if="ProductTypeName == '云主机'"
          style="width: 100%; font-size: 12px"
        >
          <el-table-column prop="supplierName" label="云服务商" />
          <el-table-column prop="deptName" label="部门" />
          <el-table-column prop="projectname" label="系统" />
          <el-table-column prop="hostInstanceName" label="云主机名称" />
          <el-table-column prop="hostIp" label="云主机IP" />
          <el-table-column prop="cpuCount" label="vCPU(核)" />
          <el-table-column
            prop="memCount"
            label="内存(GB)"
            show-overflow-tooltip
          />
          <el-table-column
            prop="fbs"
            label="分布式存储 通用型(TB)"
            :width="86"
            show-overflow-tooltip
          />
          <el-table-column
            prop="fc"
            label="集中式存储 通用型(TB)"
            :width="86"
            show-overflow-tooltip
          />
          <el-table-column
            prop="fcssd"
            label="集中性存储 高性能(TB)"
            :width="86"
            show-overflow-tooltip
          />
          <el-table-column
            prop="spycc"
            label="视频云存储(TB)"
            show-overflow-tooltip
          />
          <!-- <el-table-column
                        prop="date"
                        label="CPU平均使用率(%)"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        prop="date"
                        label="内存平均使用率(%)"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        prop="date"
                        label="存储平均使用率(%)"
                        show-overflow-tooltip
                    /> -->
        </el-table>
        <div style="text-align: right" v-if="ProductTypeName == '云主机'">
          <pagination
            v-show="CloudHostLeveThreetotal > 0"
            :total="CloudHostLeveThreetotal"
            :page.sync="CloudHostLeveThreequeryParams.pageNum"
            :limit.sync="CloudHostLeveThreequeryParams.pageSize"
            @pagination="CloudHostLeveThreeQuery"
          />
        </div>
        <!-- 高性能服务器 -->
        <el-table
          :data="BareMetalLeveThreeData"
          stripe
          v-loading="loading"
          v-if="ProductTypeName == '高性能'"
          style="width: 100%; font-size: 12px"
        >
          <el-table-column prop="supplierName" label="云服务商" />
          <el-table-column prop="deptName" label="部门" />
          <el-table-column prop="projectname" label="系统" />
          <el-table-column prop="hostInstanceName" label="物理机名称" />
          <el-table-column prop="hostIp" label="物理机IP" />
          <el-table-column prop="serviceName" label="高性能类型" />
          <el-table-column prop="remark" label="配置" />
          <!-- <el-table-column
                        prop="date"
                        label="外挂FC存储(TB)"
                    />
                    <el-table-column
                        prop="date"
                        label="外挂SSD存储(TB)"
                    /> -->
        </el-table>
        <div style="text-align: right" v-if="ProductTypeName == '高性能'">
          <pagination
            v-show="BareMetalLeveThreetotal > 0"
            :total="BareMetalLeveThreetotal"
            :page.sync="CloudHostLeveThreequeryParams.pageNum"
            :limit.sync="CloudHostLeveThreequeryParams.pageSize"
            @pagination="CloudHostLeveThreeQuery"
          />
        </div>
        <!-- 存储 -->
        <el-table
          :data="CloudDiskTheerData"
          stripe
          v-loading="loading"
          v-if="ProductTypeName == '云硬盘'"
          style="width: 100%; font-size: 12px"
        >
          <el-table-column prop="supplierName" label="云服务商" />
          <el-table-column prop="deptName" label="部门" />
          <el-table-column prop="projectname" label="系统" />
          <el-table-column prop="hostInstanceName" label="云主机名称" />
          <el-table-column prop="hostIp" label="云主机IP" />
          <el-table-column
            prop="resourceName"
            label="存储类别"
            show-overflow-tooltip
          />
          <el-table-column
            prop="useCount"
            label="存储大小（TB）"
            show-overflow-tooltip
          />
        </el-table>
        <div style="text-align: right" v-if="ProductTypeName == '云硬盘'">
          <pagination
            v-show="CloudDiskTheerTotal > 0"
            :total="CloudDiskTheerTotal"
            :page.sync="CloudHostLeveThreequeryParams.pageNum"
            :limit.sync="CloudHostLeveThreequeryParams.pageSize"
            @pagination="CloudDiskTheerQuery"
          />
        </div>
        <!-- 安全产品 -->
        <el-table
          :data="CloudHostLeveTwoqueryParams"
          stripe
          v-loading="loading"
          v-if="ProductTypeName == '应用安全'"
          style="width: 100%; font-size: 12px"
        >
          <el-table-column prop="date" label="云服务商" />
          <el-table-column prop="date" label="服务器名称" />
          <el-table-column prop="date" label="服务器IP" />
          <el-table-column prop="date" label="虚拟web防火墙" />
          <el-table-column prop="date" label="虚拟防火墙" />
          <el-table-column prop="date" label="虚拟IDS" />
          <el-table-column prop="date" label="防病毒" />
          <el-table-column prop="date" label="安全审计" />
          <el-table-column prop="date" label="应用负载均衡服务" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {
  ecsForDept,
  phyForDept,
  safeForDept,
  diskForDept,
  exportcost,
  exportphy,
  exportdisk,
  exportsafe,
} from "@/api/meteringForm/index";
import { treeselect } from "@/api/system/dept";
import { projectList } from "@/api/cloud/object";
import { logicList } from "@/api/basic/services";
export default {
  data() {
    return {
      loading: true,
      productTypeList: ["云主机", "云硬盘", "高性能", "应用安全"],
      ProductTypeName: "",
      CloudServiceProviders: [
        {
          value: "LangSao",
          label: "浪潮云",
        },
        {
          value: "SuGa",
          label: "曙光",
        },
        {
          value: "H3C",
          label: "华三",
        },
      ],
      isactive: "false",
      classification: "department",
      deptId: "",
      // 查询字段
      CloudHostLeveOnequeryParams: {
        pageNum: 1,
        pageSize: 10,
        deptId: null,
        supplier: "",
        timetag: "",
        queryLevel: "0",
      },
      CloudHostLeveTwoqueryParams: {
        pageNum: 1,
        pageSize: 10,
        ip: "",
        deptId: null,
        supplier: "",
        timetag: "",
        projectId: "",
        queryLevel: 1,
      },
      CloudHostLeveThreequeryParams: {
        pageNum: 1,
        pageSize: 10,
        deptId: null,
        supplier: "",
        timetag: "",
        projectId: "",
        hostIp: "",
        queryLevel: 2,
      },
      // ----------云主机--------------
      // 云主机第一级部门表格数据
      CloudHostLeveOneData: [],
      CloudHostLeveOnetotal: 0,
      // 云主机第二级部门表格数据
      CloudHostLeveTwoData: [],
      CloudHostLeveTwototal: 0,
      // 云主机第三级部门表格数据
      CloudHostLeveThreeData: [],
      CloudHostLeveThreetotal: 0,

      // ----------高性能--------------

      // 高性能第一级部门表格数据
      BareMetalLeveOneData: [],
      BareMetalLeveOnetotal: 0,
      // 高性能第二级部门表格数据
      BareMetalLeveTwoData: [],
      BareMetalLeveTwototal: 0,
      // 高性能第三级部门表格数据
      BareMetalLeveThreeData: [],
      BareMetalLeveThreetotal: 0,

      // --------应用安全------------
      ApplicationSecurityOneData: [],
      ApplicationSecurityTwoData: [],
      ApplicationSecurityTheerData: [],
      ApplicationSecurityOneTotal: 0,
      ApplicationSecurityTwoTotal: 0,
      ApplicationSecurityTheerTotal: 0,

      // ---------云磁盘---------------

      CloudDiskOneData: [],
      CloudDiskOneTotal: 0,
      CloudDiskTwoData: [],
      CloudDiskTwoTotal: 0,
      CloudDiskTheerData: [],
      CloudDiskTheerTotal: 0,

      // 部门数据
      deptOptions: [],
      // 项目数据
      projectLists: [],
      // 云服务商列表
      logicListALL: [],
      // 默认时间
      endDataStr: "",
    };
  },
  created() {
    var data = new Date();
    this.endDataStr = this.getNextDate(
      data.getFullYear() +
        "-" +
        (data.getMonth() + 1 > 9
          ? data.getMonth() + 1
          : "0" + (data.getMonth() + 1)) +
        "-" +
        (data.getDate() + 1 > 9 ? data.getDate() : "0" + data.getDate()),
      -1
    );
    this.CloudHostLeveOnequeryParams.timetag = this.endDataStr;
    this.CloudHostLeveTwoqueryParams.timetag = this.endDataStr;
    this.CloudHostLeveThreequeryParams.timetag = this.endDataStr;
    // 默认选中第一个产品类型
    this.OnClickProductType(0, this.productTypeList[0]);
    this.loading = false;
    this.GetQueryData();
    // 默认获取主机
    this.CloudHostLeveOneQuery();
  },
  methods: {
    getNextDate(date, day) {
      var dd = new Date(date);
      dd.setDate(dd.getDate() + day);
      var y = dd.getFullYear();
      var m =
        dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
      var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
      return y + "-" + m + "-" + d;
    },
    // 云主机导出
    CloudHostExport(type, num) {
      // 云主机
      if (type == 0) {
        if (num == 1) {
          exportcost(this.CloudHostLeveOnequeryParams).then((res) => {
            this.download(res.msg);
          });
        } else if (num == 2) {
          exportcost(this.CloudHostLeveTwoqueryParams).then((res) => {
            this.download(res.msg);
          });
        } else if (num == 3) {
          exportcost(this.CloudHostLeveThreequeryParams).then((res) => {
            this.download(res.msg);
          });
        } else {
          return;
        }
      }
      // 云硬盘
      else if (type == 1) {
        if (num == 1) {
          exportdisk(this.CloudHostLeveOnequeryParams).then((res) => {
            this.download(res.msg);
          });
        } else if (num == 2) {
          exportdisk(this.CloudHostLeveTwoqueryParams).then((res) => {
            this.download(res.msg);
          });
        } else if (num == 3) {
          exportdisk(this.CloudHostLeveThreequeryParams).then((res) => {
            this.download(res.msg);
          });
        } else {
          return;
        }
      }
      // 高性能
      else if (type == 2) {
        if (num == 1) {
          exportphy(this.CloudHostLeveOnequeryParams).then((res) => {
            this.download(res.msg);
          });
        } else if (num == 2) {
          exportphy(this.CloudHostLeveTwoqueryParams).then((res) => {
            this.download(res.msg);
          });
        } else if (num == 3) {
          exportphy(this.CloudHostLeveThreequeryParams).then((res) => {
            this.download(res.msg);
          });
        } else {
          return;
        }
      }
      // 应用安全
      else if (type == 3) {
        if (num == 1) {
          exportsafe(this.CloudHostLeveOnequeryParams).then((res) => {
            this.download(res.msg);
          });
        } else if (num == 2) {
          exportsafe(this.CloudHostLeveTwoqueryParams).then((res) => {
            this.download(res.msg);
          });
        } else {
          return;
        }
      } else {
        return;
      }
    },
    // 云硬盘一级查询
    CloudDiskOneQuery() {
      this.loading = true;
      diskForDept(this.CloudHostLeveOnequeryParams).then((res) => {
        this.loading = false;
        this.CloudDiskOneData = res.rows;
        this.CloudDiskOneTotal = res.total;
      });
    },
    // 云硬盘二级查询
    CloudDiskTwoQuery() {
      this.loading = true;
      diskForDept(this.CloudHostLeveTwoqueryParams).then((res) => {
        this.loading = false;
        this.CloudDiskTwoData = res.rows;
        this.CloudDiskTwoTotal = res.total;
      });
    },
    // 云硬盘一级到二级
    CloudDiskOneToTwoQuery(item) {
      if (item) {
        this.CloudHostLeveTwoqueryParams.deptId = item.dept_id;
        this.CloudHostLeveTwoqueryParams.supplier = item.supplier;
        this.classification = "system";
        this.CloudDiskTwoQuery();
      } else {
        this.CloudDiskTwoQuery();
      }
    },
    // 云硬盘三级查询
    CloudDiskTheerQuery() {
      this.loading = true;
      diskForDept(this.CloudHostLeveThreequeryParams).then((res) => {
        this.loading = false;
        this.CloudDiskTheerData = res.rows;
        this.CloudDiskTheerTotal = res.total;
      });
    },
    // 云硬盘二级到三级
    CloudDiskTwoToTheerQuery(item) {
      this.CloudHostLeveThreequeryParams.deptId = item.deptId;
      this.CloudHostLeveThreequeryParams.supplier = item.supplier;
      this.CloudHostLeveThreequeryParams.projectId = item.project_name;
      this.classification = "CloudHost";
      this.CloudDiskTheerQuery();
    },

    // 应用安全一级查询
    ApplicationSecurityOneQuery() {
      this.loading = true;
      safeForDept(this.CloudHostLeveOnequeryParams).then((res) => {
        this.loading = false;
        this.ApplicationSecurityOneData = res.rows;
        this.ApplicationSecurityOneTotal = res.total;
      });
    },
    // 应用安全二级查询
    ApplicationSecurityTwoQuery() {
      this.loading = true;
      safeForDept(this.CloudHostLeveTwoqueryParams).then((res) => {
        this.loading = false;
        this.ApplicationSecurityTwoData = res.rows;
        this.ApplicationSecurityTwoTotal = res.total;
      });
    },
    // 应用安全一级到二级
    ApplicationSecurityOneToTwoQuery(item) {
      this.CloudHostLeveTwoqueryParams.deptId = item.deptId;
      this.CloudHostLeveTwoqueryParams.supplier = item.supplier;
      this.classification = "system";
      this.ApplicationSecurityTwoQuery();
    },
    // 应用安全三级查询
    ApplicationSecurityTheerQuery() {
      this.loading = true;
      safeForDept(this.CloudHostLeveThreequeryParams).then((res) => {
        this.loading = false;
        this.ApplicationSecurityOneData = res.rows;
        this.ApplicationSecurityOneTotal = res.total;
      });
    },
    // 应用安全二级到三级
    ApplicationSecurityTwoToTheerQuery() {},

    // 裸金一级查询  phyForDept
    BareMetalLeveOneQuery() {
      this.loading = true;
      phyForDept(this.CloudHostLeveOnequeryParams).then((res) => {
        this.loading = false;
        this.BareMetalLeveOneData = res.rows;
        this.BareMetalLeveOnetotal = res.total;
      });
    },
    // 裸金二级查询
    BareMetalLeveTowQuery() {
      this.loading = true;
      phyForDept(this.CloudHostLeveTwoqueryParams).then((res) => {
        this.loading = false;
        this.BareMetalLeveTwoData = res.rows;
        this.BareMetalLeveTwototal = res.total;
      });
    },
    // 裸金商一级点击到二级操作
    OnclickBareMetalLeve(item) {
      this.CloudHostLeveTwoqueryParams.deptId = item.deptId;
      this.CloudHostLeveTwoqueryParams.supplier = item.supplier;
      this.classification = "system";
      this.BareMetalLeveTowQuery();
    },
    // 裸金三级查询
    BareMetalLeveTheerQuery() {
      this.loading = true;
      phyForDept(this.CloudHostLeveThreequeryParams).then((res) => {
        this.loading = false;
        this.BareMetalLeveThreeData = res.rows;
        this.BareMetalLeveThreetotal = res.total;
      });
    },
    // 裸金商二级点击到三级操作
    OnclickBareMetaLeveTow(item) {
      this.CloudHostLeveThreequeryParams.deptId = item.deptId;
      this.CloudHostLeveThreequeryParams.supplier = item.supplier;
      this.CloudHostLeveThreequeryParams.projectId = item.project_name;
      this.classification = "CloudHost";
      this.BareMetalLeveTheerQuery();
    },

    // 云主机第一级查询
    CloudHostLeveOneQuery() {
      if (this.isactive == 0) {
        this.loading = true;
        ecsForDept(this.CloudHostLeveOnequeryParams).then((res) => {
          this.loading = false;
          this.CloudHostLeveOneData = res.rows;
          this.CloudHostLeveOnetotal = res.total;
        });
      } else if (this.isactive == 1) {
        this.CloudDiskOneQuery();
      } else if (this.isactive == 2) {
        this.BareMetalLeveOneQuery();
      } else if (this.isactive == 3) {
        this.ApplicationSecurityOneQuery();
      } else {
        return;
      }
    },
    // 云主机商一级点击到二级操作
    OnclickCloudHostLeve(item) {
      this.CloudHostLeveTwoqueryParams.deptId = item.deptId;
      this.CloudHostLeveTwoqueryParams.supplier = item.supplier;
      this.classification = "system";
      this.CloudHostLeveTwoQuery();
    },
    // 云主机商二级点击到三级操作
    OnclickCloudHostLeveTow(item) {
      this.CloudHostLeveThreequeryParams.deptId = item.deptId;
      this.CloudHostLeveThreequeryParams.supplier = item.supplier;
      this.CloudHostLeveThreequeryParams.projectId = item.projectId;
      this.classification = "CloudHost";
      this.CloudHostLeveThreeQuery();
    },
    // 云主机商第二级查询
    CloudHostLeveTwoQuery() {
      if (this.isactive == 0) {
        this.loading = true;
        ecsForDept(this.CloudHostLeveTwoqueryParams).then((res) => {
          this.loading = false;
          this.CloudHostLeveTwoData = res.rows;
          this.CloudHostLeveTwototal = res.total;
        });
      } else if (this.isactive == 1) {
        this.CloudDiskTwoQuery();
      } else if (this.isactive == 2) {
        this.BareMetalLeveTowQuery();
      } else if (this.isactive == 3) {
        this.ApplicationSecurityTwoQuery();
      } else {
        return;
      }
    },
    // 云主机商第三级查询
    CloudHostLeveThreeQuery() {
      if (this.isactive == 0) {
        this.loading = true;
        ecsForDept(this.CloudHostLeveThreequeryParams).then((res) => {
          this.loading = false;
          this.CloudHostLeveThreeData = res.rows;
          this.CloudHostLeveThreetotal = res.total;
        });
      } else if (this.isactive == 1) {
        this.CloudDiskTheerQuery();
      } else if (this.isactive == 2) {
        this.BareMetalLeveTheerQuery();
      } else if (this.isactive == 3) {
        this.ApplicationSecurityTheerQuery();
      } else {
        return;
      }
    },
    // 获取查询数据
    GetQueryData() {
      // 获取部门数据
      treeselect().then((res) => {
        this.deptOptions = res.data;
      });
      // 获取云服务商列表
      logicList().then((res) => {
        this.logicListALL = res.rows;
      });
      // 获取项目列表
      projectList({ pageNum: 1, pageSize: 10000000 }).then((res) => {
        this.projectLists = res.rows;
      });
    },
    // 点击选中产品类型
    OnClickProductType(index, name) {
      if (this.isactive == index) {
        return;
      }
      this.ProductTypeName = name;
      this.isactive = index;
      this.classification = "department";

      (this.CloudHostLeveOnequeryParams = {
        pageNum: 1,
        pageSize: 10,
        deptId: null,
        supplier: "",
        timetag: this.CloudHostLeveOnequeryParams.timetag, //this.endDataStr,
        queryLevel: "0",
      }),
        (this.CloudHostLeveTwoqueryParams = {
          pageNum: 1,
          pageSize: 10,
          ip: "",
          deptId: null,
          supplier: "",
          projectId: "",
          timetag: this.CloudHostLeveTwoqueryParams.timetag, //this.endDataStr,
          queryLevel: 1,
        }),
        (this.CloudHostLeveThreequeryParams = {
          pageNum: 1,
          pageSize: 10,
          deptId: null,
          supplier: "",
          projectId: "",
          hostIp: "",
          timetag: this.CloudHostLeveThreequeryParams.timetag, //this.endDataStr,
          queryLevel: 2,
        });
      // return
      this.CloudHostLeveOneQuery();
      if (index == 0) {
        this.CloudHostLeveOneQuery();
      } else if (index == 1) {
      } else if (index == 2) {
        this.BareMetalLeveOneQuery();
      } else if (index == 3) {
        this.ApplicationSecurityOneQuery();
      } else {
        return;
      }
    },
    handleClick(val) {
      // return
      if (val.label == "部门") {
        (this.CloudHostLeveOnequeryParams = {
          pageNum: 1,
          pageSize: 10,
          deptId: null,
          supplier: "",
          timetag: this.CloudHostLeveOnequeryParams.timetag,
          queryLevel: "0",
        }),
          (this.CloudHostLeveTwoqueryParams = {
            pageNum: 1,
            pageSize: 10,
            ip: "",
            deptId: null,
            supplier: "",
            projectId: "",
            timetag: this.CloudHostLeveTwoqueryParams.timetag,
            queryLevel: 1,
          }),
          (this.CloudHostLeveThreequeryParams = {
            pageNum: 1,
            pageSize: 10,
            deptId: null,
            supplier: "",
            projectId: "",
            timetag: this.CloudHostLeveThreequeryParams.timetag,
            hostIp: "",
            queryLevel: 2,
          });
        // return
        this.CloudHostLeveOneQuery();
        if (this.isactive == 0) {
          this.CloudHostLeveOneQuery();
        } else if (this.isactive == 1) {
          this.CloudHostLeveOneQuery();
        } else if (this.isactive == 2) {
          this.CloudHostLeveOneQuery();
        } else if (this.isactive == 3) {
          this.CloudHostLeveOneQuery();
        } else {
          return;
        }
      } else if (val.label == "系统") {
        this.CloudHostLeveTwoqueryParams = {
          pageNum: 1,
          pageSize: 10,
          deptId: null,
          supplier: "",
          projectId: "",
          timetag: this.CloudHostLeveTwoqueryParams.timetag,
          queryLevel: 1,
        };
        this.CloudHostLeveThreequeryParams = {
          pageNum: 1,
          pageSize: 10,
          deptId: null,
          supplier: "",
          projectId: "",
          timetag: this.CloudHostLeveThreequeryParams.timetag,
          queryLevel: 2,
          hostIp: "",
        };
        return;
        this.CloudHostLeveTwoQuery();
        if (this.isactive == 0) {
          this.CloudHostLeveTwoQuery();
        } else if (this.isactive == 1) {
        } else if (this.isactive == 2) {
        } else if (this.isactive == 3) {
        } else {
          return;
        }
      } else {
        this.CloudHostLeveThreequeryParams = {
          pageNum: 1,
          pageSize: 10,
          deptId: null,
          supplier: "",
          timetag: this.CloudHostLeveThreequeryParams.timetag,
          hostIp: "",
          projectId: "",
          queryLevel: 2,
        };
        return;
        this.CloudHostLeveThreeQuery();
        if (this.isactive == 0) {
          this.CloudHostLeveThreeQuery();
        } else if (this.isactive == 1) {
        } else if (this.isactive == 2) {
        } else if (this.isactive == 3) {
        } else {
          return;
        }
      }
    },
    // 时间段选值赋值
    SimeSlotChange(val) {
      this.CloudHostLeveOnequeryParams.timetag = val;
      this.CloudHostLeveTwoqueryParams.timetag = val;
      this.CloudHostLeveThreequeryParams.timetag = val;
      //   this.CloudDiskOneToTwoQuery()
      // if(val){
      //     this.queryParams.startTime = val[0]
      //     this.queryParams.endTime = val[1]
      // }else{
      //     this.queryParams.startTime = null
      //     this.queryParams.endTime = null
      // }
    },
    handleChange(row) {
      if (row.length == 0) {
        this.CloudHostLeveOnequeryParams.deptId = null;
      } else if (row.length == 1) {
        this.CloudHostLeveOnequeryParams.deptId = row[0];
      } else {
        this.CloudHostLeveOnequeryParams.deptId = row[row.length - 1];
      }
    },
    handleChangeLeveTwo(row) {
      if (row.length == 0) {
        this.CloudHostLeveTwoqueryParams.deptId = null;
      } else if (row.length == 1) {
        this.CloudHostLeveTwoqueryParams.deptId = row[0];
      } else {
        this.CloudHostLeveTwoqueryParams.deptId = row[row.length - 1];
      }
    },
    handleChangeLeveThree(row) {
      if (row.length == 0) {
        this.CloudHostLeveThreequeryParams.deptId = null;
      } else if (row.length == 1) {
        this.CloudHostLeveThreequeryParams.deptId = row[0];
      } else {
        this.CloudHostLeveThreequeryParams.deptId = row[row.length - 1];
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.el-table {
  color: #000;
}
.app-container {
  padding: 10px 20px;

  .Top-title {
    text-align: left;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: bold;
    padding-left: 4px;
    border-left: 4px solid #38b3aa;
  }
  /* 装饰线 */
  .Decorative-line {
    width: 100%;
    height: 1px;
    background: #ccc;
    margin-top: 8px;
    margin-bottom: 8px;
  }
  /* 产品类型 */
  .product-type {
    width: 100%;
    // height: 26px;
    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    // flex-direction:row;
    // justify-content : flex-start;
    .title {
      font-size: 12px;
      width: 80px;
      line-height: 26px;
      color: #000;
      display: inline-block;
    }
  }
  .Type-box {
    width: auto;
    height: 26px;
    line-height: 26px;
    font-size: 12px;
    padding: 0 20px;
    background-color: #fff;
    border: 1px solid rgb(24, 144, 255);
    margin-right: 6px;
    cursor: pointer;
    display: inline-block;
  }
  .Select {
    background-color: rgb(24, 144, 255);
    color: #fff;
  }
  .classification {
    font-size: 12px;
    /* 产品类型 */
    .product-type {
      width: 100%;
      // height: 26px;
      // margin: 4px 0;
      display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
      display: -moz-box; /* Firefox 17- */
      display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
      display: -moz-flex; /* Firefox 18+ */
      display: -ms-flexbox; /* IE 10 */
      flex-direction: row;
      justify-content: flex-start;
      .title {
        display: inline-block;
        font-size: 12px;
        width: 80px;
        line-height: 26px;
        color: #000;
      }
    }
    // 总费用
    .TotalCost {
      width: 100%;
      margin: 4px 0;
      height: 20px;
      display: flex;
      color: #000; //skyblue
      font-size: 14px;
      font-weight: bold;
      .DecorationPoint {
        width: 6px;
        height: 6px;
        background-color: salmon;
        border-radius: 50%;
        margin-top: 6px;
        margin-right: 12px;
      }
    }
    // 费用描述
    .CostDescription {
      width: 100%;
      height: 18px;
      line-height: 18px;
      color: #000;
      font-size: 12px;
      margin-left: 20px;
    }
    // 总金额计费和总计量统计
    .TotalNumber {
      width: 100%;
      height: 60px;
      line-height: 60px;
      margin-left: 20px;
      color: cornflowerblue;
      font-size: 20px;
      font-weight: bold;
    }
  }
}
</style>
